<!--<template>-->
<!--  <div class="page-wrap">-->
<!--    <Table filter v-bind="tableOpts" v-on="tableEvent">-->
<!--      <template #operator>-->
<!--        <div class="operator-wrap">-->
<!--          <modifyAftersale-->
<!--            v-if="authority.includes(296)"-->
<!--            ref="dialogRef"-->
<!--            @change="fetchCurrentTable"-->
<!--          />-->
<!--          <AfterSaleDetail ref="detailRef" @change="fetchCurrentTable" />-->
<!--          <updateAfter ref="updateAfterRef" @change="fetchCurrentTable" />-->
<!--        </div>-->
<!--      </template>-->
<!--    </Table>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import tableMixins from "@/mixins/tableMixins.vue";-->
<!--import modifyAftersale from "./components/modifyAftersale.vue";-->
<!--import updateAfter from "./components/updateAfter.vue";-->
<!--import dayjs from "dayjs";-->
<!--import AfterSaleDetail from "./AfterSaleDetail.vue";-->
<!--export default {-->
<!--  name: "OrderAftersale",-->
<!--  mixins: [tableMixins],-->
<!--  components: {-->
<!--    AfterSaleDetail,-->
<!--    modifyAftersale,-->
<!--    updateAfter,-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      apiName: "afterSaleList",-->
<!--      form: {-->
<!--        storeName: {-->
<!--          tag: "el-input",-->
<!--          label: "订单名称",-->
<!--          value: "",-->
<!--          props: {-->
<!--            clearable: true,-->
<!--            placeholder: "请输入订单名称",-->
<!--          },-->
<!--        },-->
<!--        status: {-->
<!--          tag: "el-select",-->
<!--          label: "状态",-->
<!--          value: -1,-->
<!--          items: [-->
<!--            { label: "全部", value: -1 },-->
<!--            { label: "未完成", value: 0 },-->
<!--            { label: "已完成", value: 1 },-->
<!--          ],-->
<!--          props: {},-->
<!--        },-->
<!--      },-->
<!--    };-->
<!--  },-->
<!--  computed: {-->
<!--    authority() {-->
<!--      const { authority = [] } = this.$quinn.getStorage("userData") || {};-->
<!--      return authority || [];-->
<!--    },-->
<!--  },-->
<!--  methods: {-->
<!--    formatQuery(params) {-->
<!--      if (params.status == -1) delete params.status;-->
<!--      return params;-->
<!--    },-->
<!--    formatData(res) {-->
<!--      this.total = res?.total || 0;-->
<!--      this.dataSource = (res?.data || []).map((e) => {-->
<!--        if (e.updatedAt)-->
<!--          e.updatedTime = dayjs(e.updatedAt).format("YYYY-MM-DD HH:mm:ss");-->
<!--        if (e.createdAt) {-->
<!--          e.createdTime = dayjs(e.createdAt).format("YYYY-MM-DD HH:mm:ss");-->
<!--        }-->
<!--        return e;-->
<!--      });-->
<!--    },-->
<!--    handleAction(opts, row) {-->
<!--      const { id, orderId, storeName: name } = row;-->
<!--      let ref = null;-->
<!--      if (opts == "detail") ref = this.$refs.detailRef;-->
<!--      else if (opts == "delete")-->
<!--        this.showConfirm(`确认删除【${name}】？`, "newAfterSaleDelete", { id });-->
<!--      else if (opts == "done") ref = this.$refs.updateAfterRef;-->
<!--      ref && ref.showDialog(opts, row);-->
<!--    },-->
<!--  },-->
<!--};-->
<!--</script>-->

<!--<style lang="less" scoped></style>-->

<template>
  <div class="page">
    <div class="topSearch" style="margin-bottom: 10px">
      <div style="text-align: center">
        订单名称：
        <el-input
          placeholder="请按订单名称搜索"
          clearable
          v-model="params.storeName"
          size="small"
          style="width: 200px"
        ></el-input>
      </div>
      <div style="text-align: center; margin-left: 20px">
        创建人：
        <el-input
          placeholder="请按创建人名称搜索"
          clearable
          v-model="params.createName"
          size="small"
          style="width: 200px"
        ></el-input>
      </div>
      <div style="text-align: center; margin-left: 20px">
        状态：
        <el-select
          v-model="params.status"
          placeholder="请按订单状态搜索"
          size="small"
          style="width: 200px"
        >
          <el-option value="" label="全部"></el-option>
          <el-option value="1" label="已完成"></el-option>
          <el-option value="0" label="未完成"></el-option>
        </el-select>
      </div>
      <div style="text-align: center; margin-left: 20px">
        品牌方：
        <el-select
          v-model="params.systemType"
          placeholder="请按品牌方搜索"
          size="small"
          style="width: 200px"
        >
          <el-option
            :value="item.id"
            :label="item.systemName"
            :key="item.id"
            v-for="item in systemList"
          ></el-option>
        </el-select>
      </div>
      <div style="text-align: center; margin-left: 20px">
        区域：
        <el-select
          v-model="params.areaId"
          clearable
          placeholder="请按区域搜索"
          size="small"
          style="width: 180px"
        >
          <el-option
            v-for="item in areaData"
            :key="item.area"
            :label="item.areaName"
            :value="item.area"
          >
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center">
        售后类型：
        <el-select
          clearable
          v-model="params.afterSaleTypeSelect"
          size="small"
          style="width: 200px"
          placeholder="请选择"
        >
          <el-option
            v-for="item in SaleTypeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="text-align: center; margin-top: 5px">
        创建时间：
        <el-date-picker
          v-model="sateValue"
          type="daterange"
          range-separator="至"
          clearable
          size="small"
          @change="selectTime"
          style="width: 200px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button
        size="small"
        type="primary"
        style="margin-top: 10px"
        @click="getList"
        >查询</el-button
      >
      <el-button size="small" @click="reset" style="margin-top: 10px"
        >重置</el-button
      >
      <el-button
        size="small"
        @click="addData"
        type="primary"
        v-if="authority.includes(601)"
        style="position: absolute; top: 50px; right: 50px; width: 80px"
        >新增售后
      </el-button>
    </div>
    <div class="centerList">
      <el-table
        :data="orderAftersaleData"
        border
        height="calc(100vh - 250px)"
        :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
        v-loading="loading"
        :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="createdAt" label="创建时间" width="160px">
        </el-table-column>
        <el-table-column prop="picture" label="店铺名称" width="150px">
          <template slot-scope="scope">
            <div
              :style="{ color: scope.row.status === 1 ? '#67C23A' : '#F56C6C' }"
            >
              {{ scope.row.storeName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="店铺类型" width="80px">
          <template slot-scope="scope">
            {{ getWarehouse(scope.row.systemType) }}
          </template>
        </el-table-column>
        <el-table-column prop="areaName" label="仓库区域" width="80px" />
        <el-table-column prop="remark" label="售后原因" width="230px" />
        <el-table-column
          prop="afterSaleTypeText"
          label="售后类型"
          width="200px"
        />
        <el-table-column prop="newAreaName" label="派遣仓库" width="80px" />
        <el-table-column prop="deliveryDate" label="发货日期" width="100px" />
        <el-table-column prop="address" label="发货地址" width="200px" />
        <el-table-column
          prop="customPhone"
          label="客户联系方式"
          width="160px"
        />
        <el-table-column prop="picture" label="售后图片" width="150px">
          <template slot-scope="scope">
            <!--              <span v-if="item.key === 'paymentVouchers'&&!['GD', , 'GX'].includes(userName)">-->
            <el-image
              v-for="(v, i) in scope.row.preSalesImg"
              :key="i"
              style="width: 50px; height: 50px"
              ref="preview"
              :src="host + v"
              :preview-src-list="scope.row.preSalesImg.map((img) => host + img)"
            >
            </el-image>
            <!--              </span>-->
            <!--            <span v-else>{{ scope.row[item.key] }}</span>-->
          </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建人" width="160px">
        </el-table-column>
        <el-table-column prop="deliveryInfo" label="收货信息" width="230px" />
        <el-table-column prop="openTime" label="开业时间" width="100px">
          <template slot-scope="scope">
            <span>{{ scope.row.openTime }}</span>
            <span
              style="color: #e6a23c"
              v-if="!scope.row.openTime && scope.row.isOpen == 1"
              >待定</span
            >
            <span
              style="color: #13ce66"
              v-if="!scope.row.openTime && scope.row.isOpen == 0"
              >已开业</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="storeType" label="店铺类型" width="120px" />
        <el-table-column prop="billingMethod" label="快递结算" width="80px">
          <template slot-scope="scope">
            <span v-if="scope.row.billingMethod == 1">寄付</span>
            <span v-if="scope.row.billingMethod == 2">到付</span>
          </template>
        </el-table-column>
        <el-table-column prop="afterSales" label="售后人员" width="80px" />
        <el-table-column
          prop="finishRemark"
          label="售后完结备注"
          width="200px"
        />
        <el-table-column prop="picture" label="完结凭证" width="150px">
          <template slot-scope="scope">
            <!--              <span v-if="item.key === 'paymentVouchers'&&!['GD', , 'GX'].includes(userName)">-->
            <el-image
              v-for="(v, i) in scope.row.finishImg"
              :key="i"
              style="width: 50px; height: 50px"
              ref="preview"
              :src="host + v"
              :preview-src-list="['https://' + v]"
            >
            </el-image>
            <!--              </span>-->
            <!--            <span v-else>{{ scope.row[item.key] }}</span>-->
          </template>
        </el-table-column>
        <el-table-column prop="confirmTime" label="完结时间" width="150px" />
        <el-table-column label="状态" width="120px">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1">完成</el-tag>
            <el-tag v-if="scope.row.status === 0">未完成</el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200px" fixed="right">
          <template slot-scope="scope">
            <el-link
              type="success"
              style="margin-right: 20px"
              @click="confirmDialog(scope.row)"
              v-if="scope.row.status === 0 && authority.includes(602)"
              >确认完成
            </el-link>
            <el-link
              type="info"
              style="margin-right: 20px"
              v-if="authority.includes(603)"
              @click="infoDetail(scope.row)"
              >产品详情</el-link
            >
            <el-link
              type="danger"
              @click="deleteInfo(scope.row)"
              v-if="scope.row.status === 0 && authority.includes(604)"
              >删除
            </el-link>
            <el-link
              type="primary"
              @click="editDialog(scope.row)"
              v-if="scope.row.status === 0 && authority.includes(605)"
              style="margin-left: 20px"
              >编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding: 20px 0"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
    <div class="dialogBar">
      <!--      填写售后信息弹窗-->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="afterSaleInfo"
        width="30%"
        title="填写售后信息"
        v-if="afterSaleInfo"
      >
        <!--        <div style="display: flex;align-items: center">-->
        <!--          <div style="width:80px;text-align: center;">售后人员：</div>-->
        <!--          <el-input placeholder="请填写售后人员姓名" v-model="orderInfo.afterSales" size="small" style="width: 80%"></el-input>-->
        <!--        </div>-->
        <div style="display: flex; align-items: center">
          <div style="width: 80px; text-align: center">完结备注：</div>
          <el-input
            type="textarea"
            v-model="orderInfo.finishRemark"
            size="small"
            style="width: 80%"
          ></el-input>
        </div>
        <div style="width: 80px; text-align: center; margin-top: 15px">
          凭证：
        </div>
        <span style="color: gray; font-size: 12px">(粘贴复制即可上传图片)</span>
        <div class="div" style="display: flex; align-items: center">
          <div
            v-for="(v, i) in finishImg"
            style="display: flex; align-items: center; margin-right: 10px"
          >
            <el-image
              :key="i"
              style="width: 50px; height: 50px"
              ref="preview"
              :src="host + v"
              :preview-src-list="[host + v]"
            >
            </el-image>
            <div @click="deletePic(i)">
              <el-icon name="delete"></el-icon>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="afterSaleInfo = false">取 消</el-button>
          <el-button type="primary" @click="confirmInfo">确 定</el-button>
        </span>
      </el-dialog>
      <!--      产品详情弹窗-->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="detailInfo"
        title="产品详情"
        width="80%"
      >
        <el-button
          type="primary"
          size="small"
          style="margin-bottom: 15px; float: right"
          @click="exportTable"
          >导出
        </el-button>
        <el-table
          :data="detailData.detailData"
          border
          height="600px"
          v-loading="detailLoading"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          :headerCellStyle="{
            textAlign: 'center',
          }"
        >
          <el-table-column type="index" label="序号" />
          <el-table-column prop="id" label="产品ID" />
          <!--          <el-table-column prop="warehousePosition" label="库位"/>-->
          <el-table-column prop="productCode" label="产品编码" />
          <el-table-column prop="productName" label="产品名称" />
          <el-table-column prop="norms" label="规格" />
          <el-table-column prop="unit" label="单位" />
          <el-table-column prop="colour" label="颜色" />
          <el-table-column prop="count" label="数量" />
        </el-table>
      </el-dialog>
      <!--新增售后信息弹窗-->
      <el-dialog
        :close-on-click-modal="false"
        :visible.sync="addInfo"
        center
        :title="title"
        width="60%"
        top="10px"
      >
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>订单名称：
          </div>
          <el-select
            filterable
            remote
            :remote-method="inputChange"
            value-key="orderId"
            @input="changeSaleName"
            clearable
            v-model="addForm.testId"
            size="small"
            style="width: 80%"
            placeholder="请选择"
            :disabled="title == '编辑售后信息'"
          >
            <el-option
              v-for="item in saleNameList"
              :key="item.orderId"
              :label="item.storeName"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>发货时间：
          </div>
          <el-date-picker
            v-model="addForm.deliveryDate"
            disabled
            type="date"
            size="small"
            style="width: 80%"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div style="display: flex; align-items: center; margin-bottom: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>安装时间：
          </div>
          <el-date-picker
            v-model="addForm.installDate"
            type="date"
            disabled
            style="width: 80%"
            size="small"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div style="display: flex; align-items: center">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>售后类型：
          </div>
          <el-select
            clearable
            multiple
            v-model="addForm.afterSaleType"
            size="small"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in SaleTypeData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px">
          <div style="width: 80px; text-align: center">
            <span style="color: red">*</span>处理方式：
          </div>
          <el-select
            clearable
            v-model="addForm.handleMode"
            size="small"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in handleType"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </div>
        <div style="display: flex; align-items: center" id="photos">
          <div style="width: 80px; text-align: center; margin-top: 30px">
            售后图片：
          </div>
          <div>
            <span style="color: gray; font-size: 12px"
              >(粘贴复制即可上传图片)</span
            >
            <div class="div" style="display: flex; align-items: center">
              <div
                v-for="(v, i) in preSalesImg"
                style="display: flex; align-items: center; margin-right: 10px"
              >
                <el-image
                  :key="i"
                  style="width: 50px; height: 50px"
                  ref="preview"
                  :src="host + v"
                  :preview-src-list="[host + v]"
                >
                </el-image>
                <div @click="deletePic(i)">
                  <el-icon name="delete"></el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px">
          <div style="width: 80px; text-align: center">售后原因：</div>
          <el-input
            type="textarea"
            v-model="addForm.remark"
            style="width: 80%"
          ></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 10px">
          <div style="width: 80px; text-align: center">运费结算：</div>
          <el-select
            clearable
            v-model="addForm.billingMethod"
            size="small"
            style="width: 80%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in deliveryData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div style="display: flex; align-items: center; margin-top: 10px">
          <div style="width: 80px; text-align: center">店铺信息：</div>
          <el-input
            size="small"
            v-model="addForm.storeType"
            style="width: 80%"
          ></el-input>
        </div>
        <div style="display: flex; align-items: center; margin-top: 10px">
          <div style="width: 80px; text-align: center">开业时间：</div>
          <el-date-picker
            v-model="addForm.openTime"
            type="date"
            style="width: 80%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div style="display: flex; align-items: center; margin-top: 30px">
          <div style="width: 80px; text-align: center">收货信息：</div>
          <el-input
            type="textarea"
            v-model="addForm.deliveryInfo"
            style="width: 80%"
          ></el-input>
        </div>

        <div style="width: 80px; text-align: center; margin-top: 20px">
          产品：
        </div>
        <el-button
          size="small"
          type="primary"
          style="margin: 0 80px 5px 80px"
          @click="pushProduceList"
          >增加产品
        </el-button>

        <div
          style="display: flex; align-items: center; margin-top: 10px"
          v-for="(item, index) in addForm.addMaterialsList"
          :key="'addMaterialsList' + index"
        >
          <el-select
            v-model="item.id"
            remote
            @change="changeProduceName"
            filterable
            :remote-method="changeProduce"
            placeholder="请选择"
            style="width: 350px; margin-left: 80px"
            size="small"
          >
            <el-option
              v-for="item in produceList"
              :key="item.materialId"
              :value="item.materialId"
              :label="item.productName"
            >
            </el-option>
          </el-select>
          <el-input-number
            style="margin-left: 10px"
            v-model="item.count"
            @change="handleChange"
            :min="0"
            size="small"
          ></el-input-number>
          <el-link
            style="font-size: 12px; width: 80px"
            @click="deleteProduce(addForm.addMaterialsList, index)"
            >删除
          </el-link>
        </div>

        <div
          style="display: flex; align-items: center; margin-top: 30px"
          v-if="title == '编辑售后信息'"
        >
          <div style="width: 80px; text-align: center">派遣仓库：</div>
          <el-select
            v-model="addForm.newArea"
            clearable
            placeholder="请按区域搜索"
            size="small"
            style="width: 180px"
            @change="changeNewArea"
          >
            <el-option
              v-for="item in areaData"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
            >
            </el-option>
          </el-select>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addInfo = false">取 消</el-button>
          <el-button type="primary" @click="addAfterInfo">{{
            title
          }}</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import upload from '@/RayComponents/upload.vue'
import axios from 'axios'
import quinn from '../../utils/quinn'
import * as XLSX from 'xlsx-js-style'
import store from '../../store'

export default {
  components: {
    upload,
  },
  data() {
    return {
      submitType: '',
      host: this.$imgHost,
      preSalesImg: [],
      sateValue: '',
      params: {
        pageSize: 20,
        pageNumber: 1,
        storeName: '',
        createName: '',
        status: '',
        startTime: '',
        endTime: '',
      },
      deliveryData: [
        { value: 1, label: '寄付' },
        { value: 2, label: '到付' },
      ],
      handleType: [
        {
          value: 1,
          name: '上门处理',
        },
        {
          value: 2,
          name: '补发',
        },
        {
          value: 3,
          name: '上门+补发',
        },
      ],
      produceList: [],
      areaId: '',
      previewImg: [],
      finishImg: [],
      preSalesImgList: [],
      finishImgList: [],
      addInfo: false,
      afterVoucherClearImgUrl: false,
      areaData: [],
      orderAftersaleData: [],
      detailLoading: false,
      detailData: [],
      detailInfo: false,
      proId: '',
      loading: false,
      currentPage: 1,
      addForm: {
        addMaterialsList: [],
      },
      SaleTypeData: [],
      totalCount: 0,
      saleNameList: [],
      afterSaleType: [],
      afterSaleInfo: false,
      title: '',
      authority: [],
      systemList: [],
      orderInfo: {
        id: '',
        orderId: '',
        area: '',
        finishRemark: '',
        // afterSales: ""
      },
    }
  },
  created() {
    const { authorityList = [] } = quinn.getStorage('userData') || {}
    this.authority = authorityList
    this.getList()
    this.areaList()
    this.getTypeList()
    this.getSystemType()
    document.addEventListener('paste', this.handlePaste)
  },
  methods: {
    getWarehouse(val) {
      switch (val) {
        case 1:
          return '零食很忙'
        case 2:
          return '零食优选'
        case 3:
          return '卡游'
        case 4:
          return '冰杯'
        case 5:
          return '派特'
        case 6:
          return '唐饱饱'
        case 7:
          return '零食很嗨'
        case 8:
          return '动感生活'
        case 9:
          return '喜喜零食'
        case 10:
          return '云南乐尔乐'
        case 11:
          return '大嘴零食'
        case 12:
          return '重庆乐尔乐'
        default:
          return '-'
      }
    },
    areaList() {
      this.$api.areaLedgerAreaList().then((res) => {
        this.areaData = res
      })
    },
    reset() {
      this.params.storeName = ''
      this.params.status = ''
      this.params.pageSize = 20
      this.params.pageNumber = 1
      this.params.areaId = ''
      this.params.startTime = ''
      this.params.endTime = ''
      this.currentPage = 1
      this.sateValue = ''
    },
    getTypeList() {
      this.$api.newAfterSaleTypesEnum().then((res) => {
        this.SaleTypeData = res
      })
    },
    getSystemType() {
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.systemList = res
      })
    },
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    getList() {
      this.loading = true
      const params = this.params
      this.$api.afterSaleList(params).then((res) => {
        this.loading = false
        res.data.forEach((el) => {
          el.createdAt = dayjs(el.createdAt).format('YYYY-MM-DD HH:mm:ss')
          if (el.preSalesImg) {
            el.preSalesImg.forEach((e) => {
              this.previewImg.push('https://' + e)
            })
          }
        })
        this.orderAftersaleData = res.data
        this.totalCount = res.total
      })
    },
    // changeAfterSale(event, row, index) {
    //   console.log(row)
    //   console.log(event, "发生")
    //   const data={
    //     id:row.id,
    //     status:event
    //   }
    // },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getList(this.params)
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getList(this.params)
    },
    exportTable() {
      const wb = XLSX.utils.book_new()
      let data = [
        [
          this.detailData.storeName +
            '(店铺类型：' +
            (this.detailData.storeType || '无') +
            ')',
        ],
        [
          `仓库:${this.detailData.areaName}`,
          '',
          `发货日期:${this.detailData.deliveryDate}`,
        ],
        [
          `客户:${this.detailData.customPhone}`,
          '',
          `地址:${this.detailData.address}`,
          '',
        ],
        [
          `售后人员:${this.detailData.createName}`,
          '',
          `创建时间:${this.detailData.createdAt}`,
        ],
        [
          `开业日期:${this.detailData.openTime || '待定'}`,
          '',
          `快递结算:${this.detailData.billingName}`,
        ],
        [`售后原因:${this.detailData.remark}`],
        ['产品编码', '产品名称', '规格', '单位', '颜色', '数量'],
      ]
      this.detailData.detailData.map((el) => {
        data.push([
          el.productCode,
          el.productName,
          el.norms,
          el.unit,
          el.colour,
          el.count,
        ])
      })
      // data[data.length + 1] = [info.storeName,`实付:${info.totalDisCount}`,`补贴:${info.totalDiffPrice}`,`总价:${info.totalAmount}`];
      const ws = XLSX.utils.aoa_to_sheet(data)
      ws['!cols'] = [
        { wpx: 100 }, // 第一列宽度为100单位
        { wpx: 150 },
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 100 },
        { wpx: 100 },
      ]
      ws['A1'].s = {
        alignment: { horizontal: 'center' },
        font: { blod: true, color: { rgb: '000000' } },
        fill: { fgColor: { rgb: 'ff6a00' } },
      }
      ws['A1'].hpt = 140
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')
      ws['!merges'] = [
        { s: { r: 0, c: 0 }, e: { r: 0, c: 6 } },
        { s: { r: 1, c: 0 }, e: { r: 1, c: 1 } },
        { s: { r: 1, c: 2 }, e: { r: 1, c: 6 } },
        { s: { r: 2, c: 0 }, e: { r: 2, c: 1 } },
        { s: { r: 2, c: 2 }, e: { r: 2, c: 6 } },
        { s: { r: 3, c: 0 }, e: { r: 3, c: 1 } },
        { s: { r: 3, c: 2 }, e: { r: 3, c: 6 } },
        { s: { r: 4, c: 0 }, e: { r: 4, c: 1 } },
        { s: { r: 4, c: 2 }, e: { r: 4, c: 6 } },
        { s: { r: 5, c: 0 }, e: { r: 5, c: 6 } },
      ]
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' })
      // 创建一个 Blob 对象
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
      // 使用 Blob 对象创建一个链接
      const link = document.createElement('a')
      link.href = URL.createObjectURL(blob)
      link.download = `${this.detailData.storeName}.xlsx`

      // 触发下载
      link.click()

      // 清理
      URL.revokeObjectURL(link.href)

      function s2ab(s) {
        const buf = new ArrayBuffer(s.length)
        const view = new Uint8Array(buf)
        for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff
        return buf
      }
    },
    confirmDialog(val) {
      this.orderInfo.id = val.id
      this.orderInfo.area = val.area
      // this.orderInfo.creator = val.creator
      this.orderInfo.orderId = val.orderId
      this.afterSaleInfo = true
      this.finishImg = []
      this.finishImgList = []
    },
    confirmInfo() {
      const data = {
        ...this.orderInfo,
        status: 1,
        finishImg: this.finishImg,
      }
      console.log(data, 'data')
      this.$api.newAfterSaleUpdate(data).then((res) => {
        this.$message({
          type: 'success',
          message: '提交成功！',
        }),
          (this.afterSaleInfo = false)
        this.getList()
      })
    },
    //删除
    deleteInfo(val) {
      const data = {
        id: val.id,
      }
      this.$confirm('确认删除？')
        .then((_) => {
          this.$api.newAfterSaleDelete(data).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功！',
            }),
              this.getList()
          })
        })
        .catch((_) => {
          return
        })
    },
    // 产品详情
    infoDetail(val) {
      this.detailInfo = true
      this.detailLoading = true
      const params = {
        id: val.id,
        pageNumber: 1,
        pageSize: 1000000,
      }
      this.$api.newAfterSaleMaterials(params).then((res) => {
        this.detailData = {
          ...val,
          detailData: res.data,
        }
        console.log(this.detailData, '1')
      })
      this.detailLoading = false
    },
    //新增弹窗
    addData() {
      this.areaId = ''
      this.addForm = this.$options.data.call(this).addForm
      this.preSalesImg = this.$options.data.call(this).preSalesImg
      this.submitType = 1
      this.addInfo = true
      this.title = '新增售后信息'
      this.produceList = []
      this.saleNameList = []
      this.afterVoucherClearImgUrl = false
    },
    inputChange(val) {
      console.log(val)
      if (val) {
        const params = {
          storeName: val,
        }
        this.$api.orderGetOrderInfoLikeName(params).then((res) => {
          this.saleNameList = res
        })
      }
    },
    //切换派遣仓库
    changeNewArea(val) {
      this.newArea = val
      // this.addForm.addMaterialsList = []
      // this.produceList = []
    },
    changeSaleName(item) {
      console.log(item)
      this.areaId = item.areaId
      this.addForm.orderName = item.storeName
      this.addForm.orderId = item.orderId
      this.addForm.testId = item.storeName
      this.addForm.deliveryDate = item.deliveryDate
      this.addForm.installDate = item.installDate
    },
    getImageUrl(e) {
      this.addForm.afterSaleVoucher = e.join(',')
    },
    changeProduce(val) {
      if (!(this.areaId || this.newArea))
        return this.$message({ message: '请先填写订单！', type: 'warning' })
      if (this.newArea) {
        const params = {
          productName: val,
          areaId: this.newArea,
        }
        this.$api.materialGetMaterialInfoLikeName(params).then((res) => {
          this.produceList = res
        })
      } else {
        const params = {
          productName: val,
          areaId: this.areaId,
        }
        this.$api.materialGetMaterialInfoLikeName(params).then((res) => {
          this.produceList = res
        })
      }
    },
    handleChange() {},
    pushProduceList() {
      this.addForm.addMaterialsList = [
        ...this.addForm.addMaterialsList,
        {
          norms: '',
          count: 0,
        },
      ]
    },
    deleteProduce(list, index) {
      list.splice(index, 1)
    },
    addAfterInfo() {
      if (!this.addForm.testId) {
        this.$message.error('请选择关联订单!')
        return
      } else if (!this.addForm.afterSaleType) {
        this.$message.error('请选择售后类型!')
        return
      } else if (!this.addForm.handleMode) {
        this.$message.error('请选择处理方式!')
        return
      }
      const data = {
        ...this.addForm,
        preSalesImg: this.preSalesImg,
      }
      if (data.addMaterialsList.length > 0) {
        for (let i in data.addMaterialsList) {
          if (
            data.addMaterialsList[i].count == 0 ||
            !data.addMaterialsList[i].id
          ) {
            this.$message({ message: '请选择产品及数量！' })
            return
          }
        }
      }
      if (this.submitType === 1) {
        this.$api.afterSaleAfterSaleAdd(data).then((res) => {
          this.addInfo = false
          this.$message({ message: '提交成功！', type: 'success' })
          this.getList()
        })
      } else if (this.submitType === 2) {
        this.$api.afterSaleUpdateAfterSaleInfo(data).then((res) => {
          this.addInfo = false
          this.$message({ message: '提交成功！', type: 'success' })
          this.getList()
        })
      }
    },
    imageList(e) {
      this.preSalesImg.push(e)
    },
    handlePaste(event) {
      if (!(this.addInfo || this.afterSaleInfo)) return
      const clipboardData = event.clipboardData || window.clipboardData
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]

          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file)
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      if (imageFile.size > 5000000)
        return this.$message.warning('图片大于5MB，请压缩后上传！')
      axios
        .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            token: store.state.token,
          },
        })
        .then((response) => {
          this.preSalesImg.push(response.data.result[0])
          this.finishImg.push(response.data.result[0])
          //this.preSalesImgList.push('https://' + response.data.result[0]);
          //this.finishImgList.push('https://' + response.data.result[0]);
        })
        .catch((error) => {})
    },
    editDialog(row) {
      console.log(row)
      this.submitType = 2
      this.title = '编辑售后信息'
      this.areaId = row.area
      this.preSalesImg = this.$options.data.call(this).preSalesImg
      this.addInfo = true
      this.produceList = []
      if (row.materials) {
        row.addMaterialsList.forEach((el) => {
          const val = el.productName.split('')[0]
          const areaId = row.area
          this.changeProduce(val, areaId)
        })
      }
      this.addForm = row
      this.addForm.orderId = row.orderId
      this.addForm.testId = row.storeName
      if (row.newArea) {
        this.addForm.newArea = row.newArea
        this.newArea = row.newArea
      } else {
        this.addForm.newArea = row.area
        this.newArea = row.area
      }
      this.addForm.afterSaleType = row.afterSaleTypeStr.split(',')
      this.addForm.addMaterialsList = row.addMaterialsList
      if (row.preSalesImg) {
        row.preSalesImg.forEach((el) => {
          this.preSalesImgList.push(this.host + el)
        })
        this.preSalesImg = row.preSalesImg
      }
    },
    changeProduceName() {},
    deletePic(i) {
      this.preSalesImg.splice(i, 1)
      this.finishImg.splice(i, 1)
    },
  },
}
</script>
<style lang="less" scoped>
.topSearch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  div {
    width: calc((100% - 20px) / 6);
  }
}

.page {
  overflow: scroll;
}
</style>
